<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('用户管理列表')" />
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="stat-percent font-bold text-success"> <i class="fa fa-phone"></i></div>
                        <h5>本日拨打量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="call_num"></span></h1>
                        <div class="stat-percent font-bold text-success">0%</div>
                        <small>完成率</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="stat-percent font-bold text-success"> <i class="fa fa-phone-square"></i></div>
                        <h5>本日接通量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="answer_num"></span></h1>
                        <div class="stat-percent font-bold text-info"><span id="answer_rat"></span>%</div>
                        <small>接通率</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="stat-percent font-bold text-success"> <i class="fa fa-male"></i></div>
                        <h5>本日有效客户</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="collect_num"></span></h1>
                        <div class="stat-percent font-bold text-navy"><span id="collect_rat"></span>% <i class="fa fa-level-up"></i>
                        </div>
                        <small>有效率</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="stat-percent font-bold text-success"> <i class="fa fa-comment"></i></div>
                        <h5>本日通话时长</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="call_time"></span></h1>
                        <div class="stat-percent font-bold text-danger"><span id="call_avg"></span>秒</div>
                        <small>平均通话时长</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>本日员工排名</h5>
                        <div class="pull-right">
                            <div class="">
                                <label >
                                    <input type="radio" checked="" value="员工" id="optionsRadios1" name="optionsRadios">员工</label>
                                <label >
                                    <input type="radio" value="团队" id="optionsRadios2" name="optionsRadios">团队</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
         </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    
    <th:block th:include="include :: sparkline-js" />
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('dxb:userInfo:edit')}]];
        var removeFlag = [[${@permission.hasPermi('dxb:userInfo:remove')}]];
        var table_data=[];
	    $(document).ready(function () {
            radioClick();
            $('input:radio[name="optionsRadios"]').click(function (){
                let type=$("input:radio[name='optionsRadios']:checked").val();
                let data ={};
                data.type=type;
                $.ajax({
                    type: "post",
                    url: ctx + "task"+"/companyRank",
                    data: JSON.stringify(data),
                    cache: false,
                    contentType: "application/json",
                    processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
                    dataType: 'JSON',
                    async:false,
                    success: function(data) {
                        if (data.code === web_status.SUCCESS) {
                            table_data=data.data.tableData;
                        } else {
                            $.modal.alertError(data.msg);
                        }
                    },
                    error: function(error) {
                        $.modal.alertWarning("服务器出错，请联系客服");
                    }
                });
                if(type=== "员工"){
                    initPersonTable();
                }else{
                    initTeamTable();
                }
            });
	    });

        function radioClick() {
            let type=$("input:radio[name='optionsRadios']:checked").val();
            let data ={};
            data.type=type;
            $.ajax({
                type: "post",
                url: ctx + "task"+"/companyRank",
                data: JSON.stringify(data),
                cache: false,
                contentType: "application/json",
                processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
                dataType: 'JSON',
                async:false,
                success: function(data) {
                    if (data.code === web_status.SUCCESS) {
                        table_data=data.data.tableData;
                        $("#call_num").html(data.data.call_num);
                        $("#answer_num").html(data.data.answer_num);
                        $("#collect_num").html(data.data.collect_num);
                        $("#call_time").html(data.data.call_time);
                        $("#answer_rat").html(data.data.answer_rat);
                        $("#collect_rat").html(data.data.collect_rat);
                        $("#call_avg").html(data.data.call_avg);
                    } else {
                        $.modal.alertError(data.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("服务器出错，请联系客服");
                }
            });
            if(type=== "员工"){
                initPersonTable();
            }else{
                initTeamTable();
            }
        }

        function initPersonTable() {
            var options = {
                data:table_data,
                modalName: "用户管理",
                columns: [
                    {
                        field: 'id',
                        title: 'PK',
                        visible: false
                    },
                    {
                        field: 'rank',
                        title: '排名'
                    },
                    {
                        field: 'name',
                        title: '员工（团队）'
                    },
                    {
                        field: 'callNum',
                        title: '拨打量'
                    },
                    {
                        field: 'completeRatio',
                        title: '完成率'
                    },
                    {
                        field: 'collect',
                        title: '收藏量'
                    },
                    {
                        field: 'callTime',
                        title: '通话时长'
                    },
                    {
                        field: 'state',
                        title: '状态'
                    }
                ]
            };
            $.table.destroy();
            $.table.init(options);
        }

        function initTeamTable() {
            var options = {
                data:table_data,

                modalName: "用户管理",
                columns: [
                    {
                        field: 'id',
                        title: 'PK',
                        visible: false
                    },
                    {
                        field: 'rank',
                        title: '排名'
                    },
                    {
                        field: 'name',
                        title: '团队'
                    },
                    {
                        field: 'callNum',
                        title: '拨打量'
                    },
                    {
                        field: 'completeRatio',
                        title: '完成率'
                    },
                    {
                        field: 'collect',
                        title: '收藏量'
                    },
                    {
                        field: 'callTime',
                        title: '通话时长'
                    },
                    {
                        field: 'state',
                        title: '状态'
                    }
                ]
            };
            $.table.destroy();
            $.table.init(options);
        }
    </script>
</body>
</html>
